<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        a{
            text-decoration: none;
        }
        
        .hander{
            height: 40px;
            background-color: #f5f5f5;
            border-top: 1px solid #dadce0;
        }

        .nav{
            width: 1000px;
            margin: auto;
        }

        .nav_1{
            float: left;
        }

        .nav_2{
            float: right;
        }

        li{
            display: inline-block;
        }

        .one{
            color: #f24d26;
        }

        a{
            padding: 1px 5px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            color: #6c6c6c;

        }
        a:hover{
            background-color: #edeef0;
            color: #f24d26;
        }
        .logo{
            width: 1000px;
            height: 40px;
            margin: auto;
            margin-top: 20px;
            
        }
        .loge1{
            float: left;

        }
        .loge2{
            height: 40px;
            float: left;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            margin-left: 5px;
        }

        .body{
            width: 1000px;
            height: 400px;
            margin: auto;
            margin-top: 180px;
        }
        .body_1{
            width: 390px;
            height: 80px;
            color: black;
            margin: auto;
        }
        .shu1{
            width: 180px;
            height: 30px;
            float: left;
        }
        select{
            width: 130px;
            height: 35px;
            float: left;
            margin-left: 5px;
        }
        .zi{
            float: left;
            line-height: 40px;
            color: #111111;
        }
        .body_2{
            width: 390px;
            height: 40px;
            color: black;
            margin: auto;
            padding-left: 25px;
            margin-top: -25px;
        }
        .shu2{
            width: 310px;
            height: 30px;
            float: left;
            margin-left: 8px;
        }
        .yan{
            width: 100px;
            height: 30px;
            float: left;
            line-height: 30px;
            font-size: 14px;
            color: #ff76a5;
            margin-left: -80px;
            
        }
        
        .body_3{
            width: 320px;
            height: 35px;
            color:white;
            background: linear-gradient(to right,#ffca80,#ffa980);
            margin: auto;
            line-height: 35px;
            text-align: center;        
            font-size: 14px;
            border-radius: 5px;
            margin-top: 20px;
            }
        .body_4{
            width: 330px;
            height: 20px;
            margin: auto;
            font-size: 10px;    
            color: #999999;
            line-height: 10px;
            line-height: 20px;
        }
        .a3{
            height: 20px;
            line-height: 20px;
            color: #ff5000;
            background-color: white;
            text-decoration: underline;
        }
        .body_5{
            width: 150px;
            height: 20px;
            line-height: 20px;
            margin: auto;
            margin-top: 50px;
            padding-left: 300px;
            
        }
        .a4{
            color: #ff5000;
        }

        .bottom{
           width: 1000px;
           height: 200px;
           margin: auto;
           margin-top: -125px;
        }
        .bottom_1{
            width: 1000px;
            height: 100px;
            color: #6c6c6c;
            font-size: 15px;
        }
        .bottom_1 li a{
            font-size: 13px;
        }
        .bottom_2{
            width: 1000px;
            height: 100px;
            margin-top: -60px;
            color: #9c9c9c;

        }
        .bottom_2-1{
            width: 1000px;
            height: 50px;
        }
        .bottom_2-1 li a{
           font-size: 13px;
        }
        .bottom_2-2{
            width: 1000px;
            color: #9c9c9c;
            margin-top: -20px;
        }
        .but{
            color: #f24d26;
        }

    </style>
</head>
<body>
    <div class="logo"><img src="淘宝网.png" alt="" style="height: 40px;" class="loge1"><h3 class="loge2">用户注册</h3></div>
    <div class="body">
            <div class="body_1"><div class="zi">手机号码</div>
                <select name="sex" id="">
                    <option value="1">中国大陆 +86</option>
                    <option value="2">中国台湾 +886</option>
                </select>   
                <input type="text" placeholder=" 请输入你的手机号码" class="shu1" id="phone"></div>
            <div class="body_2">
                <div class="zi">验证码</div>
                <input type="text" placeholder=" 请输入校验码" class="shu2">
                <div class="yan"><a href="" class="but" >获取验证码</a></div>
                
            </div>
            <div class="body_3">同意协议并注册</div>
            <div class="body_4">已阅读并同意以下协议
                <a href="" class="a3">淘宝平台服务协议</a>、
                <a href="" class="a3">隐私权政策</a>、
                <a href="" class="a3">法律声明</a>、
                <a href="" class="a3">支付宝及客户端服务协议</a></div>
            <div class="body_5"><a href="" class="a4">切换成企业账户注册</a></div>
    </div>
    <div class="bottom">
        <div class="bottom_1">
            <ul>
               <li><a href="">阿里巴巴集团</a>|</li>
               <li><a href="">阿里巴巴国际站</a>|</li>
               <li><a href="">阿里巴巴中国站</a>|</li>
               <li><a href="">全球速卖通</a>|</li>
               <li><a href="">淘宝网</a>|</li>
               <li><a href="">天猫</a>|</li>
               <li><a href="">聚划算</a>|</li>
               <li><a href="">一淘</a>|</li>
               <li><a href="">阿里妈妈</a>|</li>
               <li><a href="">阿里云计算</a>|</li>
               <li><a href="">云OS</a>|</li>
               <li><a href="">万网</a>|</li>
               <li><a href="">支付宝</a></li>
            </ul>
        </div>
        <div class="bottom_2">
            <div class="bottom_2-1">
                <ul>
                    <li><a href="">关于淘宝</a></li>
                    <li><a href="">合作伙伴</a></li>
                    <li><a href="">营销中心</a></li>
                    <li><a href="">联系客服</a></li>
                    <li><a href="">开放平台</a></li>
                    <li><a href="">诚征英才</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">网站地图</a></li>
                    <li><a href="">法律声明及隐私权政策</a></li>
                    <li>© 2021 Taobao.com 版权所有</li>
                </ul>
            </div>
            <div class="bottom_2-2">
                网络文化经营许可证： <a href="">文网文[2010]040号</a> | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：| 1109364号
            </div>
        </div>
        <script>
            var but =document.querySelector('.but')
            but.onclick= function () {
            var num = document.getElementById("phone").value;
            if (num.length==11){
                alert("验证码发送成功");
            }
            else { 
                alert("请输入正确的手机号");
            }
        }
     </script>
 
</body>
</html>